<script setup>
import { computed, ref } from 'vue'
const props = defineProps({
  tableData: {
    type: Array,
    default: []
  },
  columns: {
    type: Array,
    default: []
  },
  options: {
    type: Object,
    default: []
  }
})
const emits = defineEmits(['handleTable'])

function handleTable(scope, type) {
  emits('handleTable', scope.row, type)
}
function handleSwitch(e) {
  console.log(e)
}
/**
 *
 * @param data 待判断数据
 */
function isInclude(data) {
  const arr = ['detail', 'delete', 'apply', 'view', 'process', 'processMangement']
  return !arr.includes(data)
}
/**
 * 学生材料状态
 */
function getMaterialStatus(status) {
  if (status == null) return '暂未提交'
  if (status == 0) return '等待审核'
  if (status == 1) return '审核不通过'
  if (status == 2) return '审核通过'
}

// 状态处理函数
const getStatusClass = (status) => {
  const statusMap = {
    0: 'waiting',
    1: 'failed',
    2: 'success'
  }
  return statusMap[status]
}

const getStatusText = (status) => {
  const statusMap = {
    0: '待审核',
    1: '未通过',
    2: '已通过'
  }
  return statusMap[status]
}

// 根据条件过滤显示的操作按钮
const getVisibleOptions = (options, row) => {
  return options.filter((option) => !option.show || option.show(row))
}

// 动态计算操作列宽度
const getOperationWidth = (options) => {
  const baseWidth = 120 // 每个按钮的基础宽度
  return `${baseWidth * options.length}px`
}

// 添加行类名判断函数
const tableRowClassName = (row) => {
  return row.row.jobStatus === 1 ? 'offline-row' : 'normal-row'
}

// 职位状态文本获取函数
const getJobStatusText = (status) => {
  const statusMap = {
    0: '正常',
    1: '已下线'
  }
  return statusMap[status] || '未知状态'
}

// 职位状态样式类获取函数
const getJobStatusClass = (status) => {
  const statusMap = {
    0: 'normal',
    1: 'offline'
  }
  return statusMap[status]
}
function disabled(data, item) {
  // console.log(data,item);
  if (
    item.label == '申请职位' ||
    item.label == '职位详情' ||
    item.label == '查看进程' ||
    item.label == '详情' ||
    item.label == '下线' ||
    item.label == '上线' ||
    item.label == '删除' ||
    item.label == '查看申请流程' ||
    item.label == '查看'||
    item.label == '编辑' 
  ) {
    return false
  }

  if (data.status == 2 || data.status == 1) {
    return true
  }
  return true
}
</script>

<template>
  <div class="table-wrapper">
    <el-table
      :data="props.tableData"
      style="width: 100%"
      :header-cell-style="{ textAlign: 'center' }"
      :cell-style="{ textAlign: 'left', paddingLeft: '20px' }"
      :row-class-name="tableRowClassName"
    >
      <slot name="firstColumn"></slot>
      <el-table-column
        v-for="(item, index) in props.columns"
        :key="index"
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
        align="left"
        show-overflow-tooltip
      >
        <template #default="scope">
          <!-- 处理职位状态显示 -->
          <template v-if="item.prop === 'jobStatus'">
            <div class="job-status-tag" :class="getJobStatusClass(scope.row.jobStatus)">
              <div class="status-dot"></div>
              <span>{{ getJobStatusText(scope.row.jobStatus) }}</span>
            </div>
          </template>
          <!-- 处理审核状态显示 -->
          <template v-else-if="item.prop === 'status'">
            <div class="status-tag" :class="getStatusClass(scope.row.status)">
              <div class="status-dot"></div>
              <span>{{ getStatusText(scope.row.status) }}</span>
            </div>
          </template>
          <template v-else-if="item.prop === 'license'">
            <viewer>
              <img :src="scope.row.license" width="130" height="100" />
            </viewer>
          </template>
          <template v-else-if="item.prop === 'material' && item.display == 'button'">
            <el-button type="primary" plain>下载</el-button>
          </template>
          <template v-else-if="item.prop === 'resume' && item.display == 'button'">
            <el-button type="primary" plain @click="handleTable(scope, item.prop)">预览</el-button>
          </template>
          <template v-else-if="item.prop === 'type' && item.display == 'tag'">
            <el-tag type="success">{{ scope.row.type }}</el-tag>
          </template>
          <template v-else-if="item.prop === 'interviewresult' && item.display == 'tag'">
            <el-tag v-if="scope.row.interviewresult == 0" type="primary" plain>已确认面试</el-tag>
            <el-tag v-if="scope.row.interviewresult == 1" type="danger" plain>面试失败</el-tag>
            <el-tag v-if="scope.row.interviewresult == 2" type="success" plain>面试通过</el-tag>
          </template>
          <!-- 处理职位状态显示 -->
          <template v-else-if="item.prop === 'enterpriseName' && item.detail == true">
            <div @click="handleTable(scope, 'enterpriseName')">
              {{ scope.row.enterpriseName }}
            </div>
          </template>
          <template v-else-if="item.prop === 'college' && item.label == '需要提交的学院'">
            <div>
              {{ scope.row.college == '*' ? '全部' : scope.row.college }}
            </div>
          </template>
          <template v-else-if="item.prop === 'major' && item.label == '需要提交的专业'">
            <div>
              {{ scope.row.major == '*' ? '全部' : scope.row.major }}
            </div>
          </template>
          <template v-else-if="item.prop === 'class' && item.label == '需要提交的班级'">
            <div>
              {{
                scope.row.class == '*' || scope.row.class == '["*"]'
                  ? '全部'
                  : scope.row.class.startsWith('[')
                    ? JSON.parse(scope.row.class).join(',')
                    : scope.row.class
              }}
            </div>
          </template>
          <template v-else>
            {{ scope.row[item.prop] }}
          </template>
        </template>
      </el-table-column>
      <!-- 表格相关操作 -->
      <el-table-column
        fixed="right"
        label="操作"
        :width="getOperationWidth(props.options)"
        v-if="props.options.length"
        align="center"
      >
        <template #default="scope">
          <el-button
            v-for="item in getVisibleOptions(props.options, scope.row)"
            :key="item.prop"
            :type="item.type"
            plain
            @click="handleTable(scope, item.prop)"
            :disabled="disabled(scope.row, item)"
          >
            {{ item.label }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<style lang="scss" scoped>
.table-wrapper {
  // width: 100%;
  overflow: hidden;
}

:deep() {
  .el-table {
    th {
      background-color: #f5f7fa !important;
      text-align: left !important;
      padding-left: 20px !important;
    }

    .el-table__cell {
      &.is-right {
        text-align: center !important;
      }
    }

    // 修改行样式
    .el-table__row {
      transition: background-color 0.3s ease;

      &.offline-row {
        background-color: #fafafa !important; // 下线状态的行背景色
        color: #909399;

        td {
          // 下线状态单元格样式
          background-color: #fafafa !important;
        }

        &:hover > td {
          // 下线状态行悬浮效果
          background-color: #f5f5f5 !important;
        }
      }

      &.normal-row {
        background-color: #ffffff;

        &:hover > td {
          // 正常状态行悬浮效果
          background-color: #f5f7fa;
        }
      }
    }
  }
}

.status-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.3s ease;

  .status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 6px;
  }

  &.waiting {
    background-color: #e6f7ff;
    color: #1890ff;

    .status-dot {
      background-color: #1890ff;
      animation: pulse 2s infinite;
    }
  }

  &.failed {
    background-color: #fff2f0;
    color: #f5222d;

    .status-dot {
      background-color: #f5222d;
    }
  }

  &.success {
    background-color: #f6ffed;
    color: #52c41a;

    .status-dot {
      background-color: #52c41a;
    }
  }

  &:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.5);
    opacity: 0.5;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.job-status-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;

  .status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 6px;
  }

  &.normal {
    background-color: #f0f9eb;
    color: #67c23a;

    .status-dot {
      background-color: #67c23a;
    }
  }

  &.offline {
    background-color: #f4f4f5;
    color: #909399;

    .status-dot {
      background-color: #909399;
    }
  }
}
</style>
